<template>
    <div class="scroll-list-box">
        <div class="box-header" v-if="headerIsShow">
            <div class="header-item" v-for="(item,index) in columnData" :key="index">{{ item.title }}</div>
        </div>
        <div class="box-content" :style="{ 'overflow-y': !scroll?'scroll':'hidden' }" v-if="data.length">
            <template v-if="scroll">
                <Vue3SeamlessScroll :list="data" :hover="option.hover" :delay="option.delay" :step="option.step">
                    <div class="semless-box" v-for="(item,index) in data" :key="index">
                        <span class="semless-box-item" v-for="(j,x) in columnData" :key="x">{{ item[j.dataIndex] }}</span>
                    </div>
                </Vue3SeamlessScroll>
            </template>
            <template v-else>
                <div class="semless-box" v-for="(item,index) in data" :key="index">
                    <span class="semless-box-item" v-for="(j,x) in columnData" :key="x">{{ item[j.dataIndex] }}</span>
                </div>
            </template>
        </div>
        <template v-else>
            <a-empty />
        </template>
    </div>
</template>

<script setup>
    import { ref } from "vue";
    import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
    const props = defineProps({
        // 是否需要表头
        headerIsShow: {
            type: Boolean,
            default: () => false
        },
        // 是否滚动
        scroll: {
            type: Boolean,
            default: () => false 
        },
        columnData: {
            type: Array,
            default: () => []
        },
        // 滚动列表的数据
        data: {
            type: Array,
            required: true,
            default: () => []
        },
        // vue3-seamless-scroll配置项
        option: {
            type: Object,
            default(){
                return {
                    step: 0.4,
                    hover: true,
                    delay: 0.4
                }
            }
        }
    });
</script>

<style lang="less" scoped>
    ::-webkit-scrollbar {
    width: 0 !important;
    }
    ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
    }
    .scroll-list-box{
        width: 100%;
        height: 100%;
        padding: 0.05rem 0.1rem;
        z-index: 99;
        .box-header{
            width: 100%;
            display: flex;
            align-items: center;
            // background: #f7f8fa;
            background: var(--color-neutral-2);
            .header-item{
                height: 0.4rem;
                line-height: 0.4rem;
                flex: 1;
                padding-left: 0.1rem;
            }
        }
        .box-content{
            width: 100%;
            height: 90%;
            overflow: hidden;
            .semless-box{
                display: flex;
                align-items: center;
                .semless-box-item{
                    flex: 1;
                    height: 0.4rem;
                    line-height: 0.4rem;
                    padding-left: 0.1rem;
                    border-bottom: 1px solid rgb(229, 230, 235);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                &:hover{
                    background: #f7f8fa;
                }
            }
            
        }
    }
</style>